<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>努比亚手机官网</title>
		<link rel="stylesheet" type="text/css" href="../css/gouwuche.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2699111_yr4hkmsj6qs.css" />
	</head>
	<body>
		<div class="header22"></div>
		<div class="main2">
			<div class="main22">
				<div class="m1">
					<p>您的购物车还是空的赶紧行动吧！</p>
					<button type="button">马上去购物</button>
				</div>
				<div class="m2">
					<span class="iconfont icon-gouwuche"></span>
				</div>
			</div>
		</div>
		<div class="main23"></div>
		<div class="footer22"></div>
	</body>
</html>
<script src="../js/jquery.js"></script>
<script src="../js/gouwuche.js" ></script>
	
<script type="text/javascript">
$('.m1>button').on('click', function() {
		location.href = "shouye.html";
	})
	$(".header22").load("header.html");
	$(".footer22").load("footer.html");
	
	// if($('.main23').html()==null){
	// 	$('.main2').show();
	// 	$('.main23').hide();
	// }else{
	// 	$('.main23').show();
	// 	$('.main2').hide();
	// }
	
	function getShoppingCart(){
		$.get("../php/getShoppingCart.php?vipName=goodsName",function(data){
			// console.log(data);
			let goodsList=JSON.parse(data);
			// console.log(goodsList);
			let htmlStr='';
				goodsList.forEach(goods=>{
					htmlStr +=`
						<ul>
							<li>购物车
								<div></div>
							</li>
							<li>确认订单
							<div></div></li>
							<li>支付订单<div></div></li>
							<li>完成订单<div></div></li>
						</ul>
						<div class="List">
							<table border="1px">
								<thead>
									<tr>
										<th>商品清单</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="goods-img"><img src="${goods.goodsImg}" ></td>
										<td>
											<span class="goods-name">
												${goods.goodsName}
											</span>
											</td>
										<td class="gp">
											￥<span class="goods-price">
												${goods.goodsPrice}
											</span>
											</td>
										<td class="gb">
											<p>
											<button type="button" class="reduce">-</button>
											<span class="goods-num">1</span>
											<button type="button" class="add">+</button>
											</p>
										</td>
										<td>
											￥<span class="goods-single-price">
												${goods.goodsPrice}
											</span>
											</td>
										<td><button type="button" class="del" >X</button></td>
									</tr>
								</tbody>
								<tfoot>
									<tr class="Foo1">
										<td><b>已选择</b><span id="goods-total-num">1</span><b>件商品</b></td>
									</tr>
									<tr class="Foo2">
										
										<td colspan="6" class="tall">
											<b>合计(不含运费)</b>
											￥<span id="goods-total-price">${goods.goodsPrice}</span></td>
									</tr>
								</tfoot>
							</table>
							<hr >
							<div class="llbtn">
								<button type="button">去结算</button>
								<button type="button">继续购物</button>
								
							</div>
						</div>
					`;
				})
				$('.main23').html(htmlStr);
				shopping();
		})
	}
	$(function(){
		getShoppingCart();
	})
	function shopping(){
		
	
	$(function(){
		$('table').on('click','.add',function(){
			let num=$(this).prev().text();
			num++;
			$(this).prev().text(num);
			let price=$('.goods-price').html();
			let main=$('.goods-single-price').html();
			main=num*price;
			$('.goods-single-price').html(main);
			getsum();
			getnum();
		})
		$('table').on('click','.reduce',function(){
			let num=$(this).next().text();
			num--;
			if(num<=0){
				num=0;
			}
			$(this).next().text(num);
			let price=$('.goods-price').html();
			let main=$('.goods-single-price').html();
			main=price*num;
			$('.goods-single-price').html(main);
			getsum();
			getnum();
		})
		
		$('table').on('click','.del',function(){
			alert('确定删除嘛？')
			$(this).parent().parent().remove();
			$('.main23').css('display','none');
		})
	})
		function getsum(){
			let $trs=$("tbody tr");
			var sum=0;
			for(var i=0;i<$trs.length;i++){
				var $tr=$trs.eq(i);
				var mny=$('.goods-single-price').html();
				sum +=parseInt(mny);
			}
			$("#goods-total-price").html(sum);
		}
		function getnum(){
			let $trs=$("tbody tr");
			var num=0;
			for(var i=0;i<$trs.length;i++){
				var $tr=$trs.eq(i);
				var qnum=$tr.children(2).children(0).next().html();
				var qnum=$('.goods-num').html();
				num +=parseInt(qnum);
			}
			$('#goods-total-num').html(num);
		}
		}
		
		function deleteGoods(){
		$.get("../php/deleteGoods.php?vipName=goodsName&goodsId=0003",function(data){
			console.log(data);
		})	
		}
		function  updateGoodsCount(){
			$.get("../php/deleteGoods.php?vipName=goodsName&goodsId=003&goodsCount=5",function(data){
				console.log(data)
			})
		}
		$(function(){
			updateGoodsCount()
		})
</script>
